<template>
  <!-- 内容开始 -->
  <div>
    <!-- 开头图片开始 -->
    <div class="headImg"></div>
    <!-- 开头图片结束 -->

    <!-- 按钮/卡片分页/分页页数内容包裹层开始 -->
    <div class="package">
      <!-- 按钮部分开始 -->
      <div class="btn">
        <button @click="cowFun" :class="{btnSty : btnBool}">COWHIDE</button>
        <button @click="nylonFun" :class="{btnSty : !btnBool}">NYLON CLASS</button>
      </div>
      <!-- 按钮部分结束 -->
      <!-- 卡片分页部分开始 -->
      <div class="card">
        <div v-for="(item, index) in showArr" :key="index" @click="cardFun(item)">
          <div>
            <img :src="item.url" alt />
          </div>
          <span>{{ item.text }}</span>
        </div>
      </div>
      <!-- 卡片分页部分结束 -->
      <!-- 分页选项部分开始 -->
      <div class="pagin">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="productArr.length"
        ></el-pagination>
      </div>
      <!-- 分页选项部分结束 -->
    </div>
    <!-- 按钮/卡片分页/分页页数内容包裹层结束 -->
  </div>
  <!-- 内容结束 -->
</template>

<style lang="less" scoped>
// 开头图片开始
.headImg {
  width: 100%;
  height: 400px;
  background-image: url("../assets/images/p.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
// 开头图片结束

// 按钮/卡片/分页内容包裹层开始
.package {
  width: 80%;
  margin-left: 10%;
  //   background-color: red;

  // 按钮部分开始
  .btn {
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;

    button {
      width: 150px;
      height: 50px;
      margin-left: 20px;
      color: #858585;
      transition: all 0.5s;
      border: none;
      outline: none;
      border-radius: 10px;
    }

    .btnSty {
      background-color: rosybrown;
      color: white;
    }
  }
  // 按钮部分结束
  // 卡片分页部分开始
  .card {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;

    & > div:hover span {
      font-size: 20px;
      transform-origin: 0% 0%;
      transform: rotate(90deg);
      box-shadow: 0px 5px 10px 0px gray;
    }

    & > div:hover div {
      box-shadow: 0px 10px 10px 0px gray;
    }

    & > div {
      width: 25%;
      height: 500px;
      margin-bottom: 80px;
      box-sizing: border-box;
      background-color: #f8f8f8;

      & > div {
        width: 90%;
        height: 400px;
        margin-left: 5%;
        transition: all 1s;
        box-shadow: 0px 110px 20px 0px gray;

        img {
          width: 100%;
          height: 100%;
        }
      }

      & > span {
        display: block;
        width: 100%;
        height: 100px;
        background-color: #f8f8f8;
        text-align: center;
        line-height: 100px;
        transition: all 1s;
        transform-origin: 0% 0%;
      }
    }
  }
  // 卡片分页部分结束

  //   分页选项部分开始
  .pagin {
    width: 100%;
    height: 50px;
    padding-bottom: 40px;
    display: flex;
    justify-content: center;
    align-items: center;

    &:hover {
    }
  }
  //   分页选项部分结束
}
// 按钮/卡片/分页内容包裹层结束
</style>

<script>
import productImg_1 from "../assets/images/78.png";
import productImg_2 from "../assets/images/q.png";
import productImg_3 from "../assets/images/w.png";
import productImg_4 from "../assets/images/r.png";
import productImg_5 from "../assets/images/572747983646730888.png";
import productImg_6 from "../assets/images/709841395145370334.png";
import productImg_7 from "../assets/images/745447992448334542.png";
import productImg_8 from "../assets/images/780113851254893270.png";
import productImg_9 from "../assets/images/897270542847076565.png";
import productImg_10 from "../assets/images/组 260.png";
import productImg_11 from "../assets/images/572747983646730888.png";
import bus from '../assets/js/bus'
export default {
  data() {
    return {
      // 按钮样式
      btnBool: true,
      //   显示的产品信息数据
      showArr: [],
      // 产品信息数据
      productArr: [
        {
          url: productImg_1,
          text: "SOFT OILED LEATHER LEASH",
          type: ["1.2*110CM", "1.2*170CM", "1.2*270CM OR CUSTOMIZED"]
        },
        {
          url: productImg_2,
          text: "BRAIDED LEATHER LEASH",
          type: ["1.2*270CM OR CUSTOMIZED"]
        },
        {
          url: productImg_3,
          text: "BRAIDED LEATHER LEASH",
          type: ["1.2*110CM"]
        },
        {
          url: productImg_4,
          text: " OILED LEATHER LEASH",
          type: ["1.2*110CM", "1.2*170CM", "1.2*270CM"]
        },
        {
          url: productImg_5,
          text: "SOFT OILED  LEASH",
          type: ["1.2*110CM", "1.2*170CM"]
        },
        {
          url: productImg_6,
          text: "SOFT OILED LEATHER LEASH",
          type: ["1.2*120CM", "1.2*280CM OR CUSTOMIZED"]
        },
        {
          url: productImg_7,
          text: "TITLE OILED LEATHER LEASH",
          type: ["1.5*110CM", "1.5*170CM"]
        },
        {
          url: productImg_8,
          text: "SOILEDOFT  LEATHER LEASH",
          type: ["1.0*110CM", "1.0*170CM", "1.2*270CM OR CUSTOMIZED"]
        },
        {
          url: productImg_9,
          text: "HODD OILED LEATHER LEASH",
          type: ["1.2*170CM", "1.2*270CM OR CUSTOMIZED"]
        },
        {
          url: productImg_10,
          text: "UZINB LEATHER LEASH",
          type: ["1.2*110CM", "1.2*170CM", "1.2*270CM OR CUSTOMIZED"]
        },
        {
          url: productImg_11,
          text: "HOUSE OILED LEATHER LEASH",
          type: ["1.2*110CM", "1.2*270CM OR CUSTOMIZED"]
        },
      ],
      pageSize: 8,
    };
  },
  created() {
    this.handleCurrentChange(1);
  },
  methods: {
    cowFun() {
      this.btnBool = !this.btnBool;
      this.showArr = this.showArr.reverse();
    },
    nylonFun() {
      this.btnBool = !this.btnBool;
      this.showArr = this.showArr.reverse();
    },
    handleCurrentChange(val) {
      let j = 0;
      let arr = [];
      for (let i = (val - 1) * this.pageSize; i < val * this.pageSize; i++) {
        if (this.productArr[i] == undefined) return (this.showArr = arr);
        arr[j] = this.productArr[i];
        j++;
      }
      this.showArr = arr;
    },
    handleSizeChange(val) {
      console.log(val);
    },
    cardFun(val) {
      this.$router.push({name: 'Cowhide', params: val})
      // this.$router.push('cowhide')
      // bus.$emit('detailedData', val)
    }
  },
};
</script>